
import { Component, useState } from "react"

class Fahrenheit extends Component {
  render() {
    return (
      <div>
        <label>华氏温度：</label>
        <input type="text" />
      </div>
    )
  }
}
function Celsius(props) {
  // value是props，props不能直接修改
  // 子要去修改父的状态，在vue中
  //    1）给子传递一个方法，子去调用方法，把新的数据传递给父
  //    2）自定义事件 + 子中通过emit触发自定义事件，并传递新的数据
  // 在react，是传递方法，子去调用方法，这个方法，在react中也叫props
  let { value, onChange } = props;
  let change = (e) => {
    // console.log(e.target.value);
    onChange(e.target.value)
  }
  return (
    <div>
      <label>摄氏温度：</label>
      {/* 当input框上写了一个value={xxx} , 输入框就变成了受控输入框 */}
      <input type="text" value={value} onChange={change} />
    </div>
  )
}

function DemoA() {
  const [temper, setTemper] = useState(0)
  let change = (val) => {  // val就是子传递给父的新数据
    setTemper(val)
  }
  return (
    <div>
      <Fahrenheit></Fahrenheit>
      <hr />
      {/* value={temper} 叫自定义属性 在react中通常叫props */}
      {/* onChange={change} 不叫自定义事件，叫props */}
      {/* 给子传递的是如果是一个方法，建议使用on打头 */}
      <Celsius value={temper} onChange={change}></Celsius>
    </div>
  )
}

export default DemoA;